<template>
  <div id="bg">
    <div id="activiy-dated">
      <h1 class="data-msg">
        尊敬的{{userInfo.name}}<span v-if="userInfo.dealer != 0">，您成功预约门店</span><br>
        <span v-if="userInfo.dealer != 0">{{userInfo.dealer}}！</span>
      </h1>
      <div class="dated-qr">
        <div class="qr-box">
          <qrcode-vue :value="Qrurl" :size="180"></qrcode-vue>
        </div>
      </div>
      <p v-if="tipsIsShow">（长按保存二维码）</p>
    </div>
  </div>
  <div id="canvas-box"></div>
</template>
  
<script setup name="dated">
import { onMounted, reactive, ref } from 'vue'
import QrcodeVue from 'qrcode.vue';
const tipsIsShow = ref(true);
import html2canvas from 'html2canvas'
const userInfo = reactive(JSON.parse(localStorage.getItem('userInfo')));
const Qrurl = ref(`${document.location.href.split('/dated')[0]}/staff?phone=${userInfo.phone}`);

onMounted(() => {
  setTimeout(() => {
    tipsIsShow.value = false;
    html2canvas(document.body, {
      useCORS: true,
      allowTaint: true,
      backgroundColor: null,
      scale: window.devicePixelRatio,
      logging: false,
      onclone: (doc) => {
        doc.body.style.backgroundImage = getComputedStyle(document.body).backgroundImage;
        doc.body.style.backgroundSize = getComputedStyle(document.body).backgroundSize;
      }
    }).then(function (canvas) {
      // 将 canvas 转换为图片
      const img = new Image();
      img.src = canvas.toDataURL('image/png');
      img.style.width = '100%';
      img.style.height = '100%';
      document.getElementById('canvas-box').appendChild(img);
    })
  }, 300);
})
</script>
  
<style lang="less">
#bg{
  position: relative;
  width: 100vw;
  height: 100vh;
  max-width: 480px;
  margin: 0 auto;
  background: url(../../assets/img/c_bg_less.png);
  background-size: 100% auto;
}
#activiy-dated{
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 0 20px 30px 20px;
  /* 添加毛玻璃效果 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 1);
  h1{
    font-size: 18px;
    text-align: center;
    padding: 25px 0 10px 0;
    line-height: 36px;
    color: #fff;
  }
  .dated-qr{
    text-align: center;
    margin: 10px auto 20px auto;
    .qr-box{
      padding: 10px;
      text-align: center;
      display: inline-block;
      background-color: #fff;
    }
  }
  p{
    font-size: 16px;
    color: #999;
    text-align: center;
    padding: 0px 0 30px 0;
  }
}
#canvas-box{
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
</style>